<template>
    <div class="notice">
        <div class="whitchCheck">
            <div class="link"  @click="show = true">
                <p>{{messageList[checked]}}</p>
                &nbsp;
                <i class="iconfont icon-xiangxiajiantou"></i>
            </div>
            <div class="overlay" v-show="show">
                <div class="content" v-show="show === true">
                    <van-radio-group v-model="checked">
                        <van-cell-group inset>
                            <van-cell v-for="(msg,index) in messageList" :key="index" :title="msg" clickable @click="checked = index">
                                <template #right-icon>
                                    <van-radio :name="index"/>
                                </template>
                            </van-cell>
                        </van-cell-group> 
                    </van-radio-group>
                    <button @click="selectMessage">确认</button>
                </div>
            </div>
        </div>
        <!-- <OneNotice></OneNotice> -->
        <!-- 选择的是系统消息 -->
        <a class="oneNotice" href="javascript:;" v-for="(info,index) in infoList" :key="index">
            <div class="headPic">
                <!-- 头像这一部分系统和非系统通知不一样 -->
                <template v-if="info.userId == 0">
                    <i class="iconfont icon-xitongtongzhi"></i>
                </template>
                <template v-if="info.userId != 0">
                    <router-link :to="`/themself/${info.userId}`">
                        <van-image 
                            width="1.3rem" 
                            height="1.3rem" 
                            radius="100%" 
                            fit="cover" 
                            :src="info.img" 
                        />
                    </router-link>
                </template>

            </div>
            <div class="detail">
                <div class="detailLeft">
                    <template v-if="info.userId == 0">
                        <p>{{info.message}}</p>
                    </template>
                    <template v-if="info.userId != 0">
                        <p>{{`${info.message} ：` }}</p>
                    </template>
                    <p style="margin: 0.2rem 0;font-weight: 800;">{{info.bodyMessage}}</p>
                    <p>{{info.time}}</p>
                </div>
            </div> 
        </a>
    </div>
</template>

<script>
 import jwtDecode from 'jwt-decode'
 import axios from 'axios'
export default {
    name:'Notice',
    
    data() {
        return {
            show:false,
            messageList:['全部消息','系统通知','回复我的','点赞','收藏',],
            checked:0,
            decode:null,
            infoList:null    
        }
    },
    mounted(){
        //获取用户的id
        let token=sessionStorage.getItem("token")
        this.decode = jwtDecode(token);
        axios({
            url:'/chat/unread',
            method:'get',
            params:{
                userId:this.decode.userId
            },
            headers:{
                'Authentication-Token':JSON.parse(sessionStorage.getItem("token"))
            }
        }).then(data=>{
            sessionStorage.setItem('allUnread',data.data.data)
        })
        //默认获取全部的消息
        this.getInfo(this.decode.userId)        
    },
    methods: {
        getInfo(userId,type){
            axios({
                url:"/body/getSuchMessage",
                method:'get',
                params:{
                    classes:type,
                    userId:userId
                },
                headers:{
                    'Authentication-Token':JSON.parse(sessionStorage.getItem("token"))
                }
            }).then(data=>{
                console.log(data)
                if(data.data.code === 20000){
                    this.infoList = data.data.data
                    ////查看私信未读消息数
                    axios({
                        url:'/chat/unread',
                        method:'get',
                        params:{
                            userId:this.decode.userId
                        },
                        headers:{
                            'Authentication-Token':JSON.parse(sessionStorage.getItem("token"))
                        }
                    }).then(data=>{
                        sessionStorage.setItem('allUnread',data.data.data)
                    })
                }
            }).catch(err=>{
                console.log(err)
            })
        },
        selectMessage(){
            this.show = false
            if(this.checked === 0){
                this.getInfo(this.decode.userId)
            }else if(this.checked === 2){       
                this.getInfo(this.decode.userId,1)
            }else if(this.checked === 3){       
                this.getInfo(this.decode.userId,0)
            }else if(this.checked === 4){       
                this.getInfo(this.decode.userId,3)
            }else{
                this.getInfo(this.decode.userId,5)
            }
        }
    },
}
</script>

<style lang="less" scoped>
.cancelBtn{
    margin-right: 0.3rem !important;
}
    .notice{
        .whitchCheck{
            padding: 0.3rem;
            background-color: #fafafa;   
            margin-top: 0.1rem;
            .link{
                display: inline-flex;
            }
            p{
                display: inline-block;
                font-size: @fontSmall;
            }
        }
    }

    .overlay{
        position: absolute;
        top: 0px;
        left: 0px;
        background-color: rgba(0,0,0,.3);
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: 99;
        .content{
            background-color: white;
            position: absolute;
            width: 100%;
            text-align: center;
            top: 50%;
            button{
                background-color: white;
                border: solid 1px black;
                border-color: var(--themeColor);
                color: var(--themeColor);
                padding: 0.1rem 0.3rem;
                margin: 0.6rem 0;
            }
            .overlayList{
                list-style: none;
                .overlayItem{
                    font-size: 0.35rem;
                    border-top: solid 1px #ebebeb;
                    padding: 0.3rem 0.7rem;
                    display: flex;
                    justify-content: space-between;
                }
            }
        }
    }

    .slid-enter-active{
        animation: slidAnimate 0.5s;
        animation-fill-mode : forwards ;
    }
    .slid-leave-active{
        animation: slidAnimate reverse 0.5s forwards;
    }

    @keyframes slidAnimate {
        from{
            bottom: -50%;
        }to{
            bottom: 0%;
        }
    }

    .oneNotice{
        display: flex;
        padding: 0.25rem;
        border-top: solid 1px #dbdbdb;
        .headPic{
            display: flex;
            align-items: center;
        }
        .detail{
            flex: 1;
            display: flex;
            .detailLeft{
                margin-left: 0.3rem;
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                color: #3b3b3b;
                white-space: pre-wrap;
                p,i{
                    font-size: 0.35rem;
                }
            }
        }
    }
</style>